import React, {useState} from "react";
import {Dropdown, Layout, Menu,Avatar } from "antd"
import {MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined} from "@ant-design/icons";
import {withRouter} from "react-router-dom";

const {Header} = Layout
function TopHeader(props) {
    const [collapsed, setCollapsed] = useState(false)
    const changeCollapsed = () => {
        setCollapsed(!collapsed)
    }
    const {role:{roleName},username} = JSON.parse(localStorage.getItem("token"))
    const menu = (
        <Menu>
            <Menu.Item>
                {roleName}
            </Menu.Item>
            <Menu.Item danger onClick={()=>{
                localStorage.removeItem("token")
                props.history.replace("/login")
            }}>logout</Menu.Item>
        </Menu>
    )
    return (
        <Header className="site-layout-background" style={{padding: '0 16px'}}>
            {/*{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {*/}
            {/*    className: 'trigger',*/}
            {/*    onClick: this.toggle,*/}
            {/*})}*/}
            {
                collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed}/> :
                    <MenuFoldOutlined onClick={changeCollapsed}/>
            }
            <div style={{float: "right"}}>
                <span>welcome back <span style={{color:"blue"}}>{roleName}</span></span>
                <Dropdown overlay={menu}>
                    <Avatar size="small" icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header>
    )
}

export default withRouter(TopHeader)
